@import '~sassvar';

.icon-arrow {
    width: 27px;
    height: 16px;
    background-image: url('~images/icon-arrow.png');
}

.icon {
    display: inline-block;
    vertical-align: baseline;
    background-repeat: no-repeat;
    background-size: 100%;

    &-up {
        position: relative;
        top: 3px;
        width: 26px;
        height: 26px;
        background-image: url('~images/icon-up.png');

        &.active {
            background-image: url('~images/icon-up-active.png');
        }
    }

    &-arrow-up {
        @extend .icon-arrow;
    }

    &-arrow-down {
        @extend .icon-arrow;
        transform: rotate(180deg);
    }

    &-close {
        width: 100px;
        height: 100px;
        background: url('~images/icon-close.png') no-repeat center center;
        background-size: 64px 64px;
    }
}